<!-- 
    //进入路径绘制模式
    beginPath()
    //设置开始坐标
    moveTo()
    // 绘制直线
    lineTo()
    // 填充闭合内区域
    fill()
    // 绘制闭合区域边框
    stroke()
 -->
<html>

<head>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
        function draw() {
            var canvas = document.getElementById('canvas');
            if (canvas.getContext) {
                var ctx = canvas.getContext('2d');
                // 填充三角形
                ctx.beginPath();
                ctx.moveTo(25, 25);
                ctx.lineTo(105, 25);
                ctx.lineTo(25, 105);
                ctx.fill();

                // 描边三角形
                ctx.beginPath();
                ctx.moveTo(125, 125);
                ctx.lineTo(125, 45);
                ctx.lineTo(45, 125);
                ctx.closePath();
                ctx.stroke();
            }
        }

    </script>
    <style type="text/css">
        canvas {
            border: 1px solid black;
        }
    </style>
</head>

<body onload="draw();">
    <canvas id="canvas" width="150" height="150"></canvas>
</body>

</html>